<template>
	<view class="">
		<uni-nav-bar :fixed="true" :statusBar="true" @clickRight="openAdd">
			<!-- 左边 -->
			<block slot="left">
				<view class="nav-left">
					<view class="iconfont icon-qiandao"></view>
				</view>
			</block>
			<!-- 中间 -->
			<view class="nav-middle w-100 d-flex jc-center ai-center mr-3">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="follow px-2 fs-md" :class="{'active':index === tabIndex}" @tap="changeTab(index)">
						{{tab.name}}
						<view class="nav-middle-line"></view>
					</view>
				</block>
			</view>
			<!-- 右边 -->
			<block slot="right">
				<view class="nav-right">
					<view class="iconfont icon-bianji1"></view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
		import uniNavBar from "../../components/official/uni-nav-bar/uni-nav-bar.vue"
		
	export default {
		props: {
			tabBars: {
				type: Array,
				required: true
			},
			tabIndex: {
				type: Number,
				required: true
			}
		},
		methods: {
			changeTab(index) {
				this.$emit('changeTab', index)
			},
			openAdd() {
				// 打开发布页
				this.$Router.push({name: 'publish'})
			}
		},
		components:{
			uniNavBar
		}
	}
</script>

<style lang="scss" scoped>
	.nav-left,
	.nav-right {
		width: 100%;

		.iconfont {
			font-size: 25px;
			color: #ff9619;
		}
	}

	.nav-right {
		margin-left: 60upx;
	}

	.nav-middle {
		view {
			font-weight: bolder;
			color: #969696;
		}

		.nav-middle-line {
			border-bottom: 12upx solid transparent;
			width: 70upx;
			border-radius: 20upx;
			margin: 0 auto;
			margin-top: -10upx;
		}

		.active {
			color: #333333 !important;

			.nav-middle-line {
				border-bottom: 12upx solid #FEDE33;
			}
		}
	}
</style>
